<template>
	<view class="status-change">
		<view class="status-list">
			<view class="status-item">
				<view class="status-img"></view>
				<view class="status-label">
					<text>创建运单</text>
				</view>
				<view class="stauts-bottom">
					<text class="status-time">{{info.createTime&&info.createTime.replace("T",' ')}}</text>
					<text class="status-status">已派单</text>
				</view>
			</view>
			<!-- cur 当前结点 no：代表cur之后的结点 -->
			<view :class="'status-item '+getStateNormal(10,info.billState)">
				<view class="status-img">
					<image src="@/static/image/icon_loading_complete.png" mode="widthFix"></image>
				</view>
				<view class="status-label">
					<text>发车</text>
				</view>
				<view class="stauts-bottom">
						<!-- <text class="status-time">{{info.departureTime}}</text> -->
						<text v-if="info.departureTime == null" class="status-time"></text>
						<text v-if="info.departureTime != null" class="status-time">{{info.departureTime}}</text>
				<!-- <text class="status-time">{{fc.finishTime&&fc.finishTime.replace("T",' ')}}</text> -->
					<text v-show="getStateNormal(10,info.billState)=='cur'" class="status-status"
						@click="carShow=true">去发车</text>
					<text v-show="getStateNormal(10,info.billState)==''">已发车</text>
					<text v-show="getStateNormal(10,info.billState)=='no'">未开始</text>
				</view>
			</view>
			<view :class="'status-item '+getStateByBill(item.finishFlag,1)" v-for="(item,index) in loads" :key="index">
				<view class="status-img">
					<image src="@/static/image/icon_load_position.png" mode="widthFix"></image>
				</view>
				<view class="status-label">
					<text>装货点{{loads.length>1?(index+1):''}}</text>
				</view>
				<view class="stauts-bottom">
					<text class="status-time">{{item.finishTime&&item.finishTime.replace("T",' ')}}</text>
					<text v-show="getStateByBill(item.finishFlag,1)=='cur'" class="status-status"
						@click="upShow=true;upData.id=item.id;">去装货</text>
					<text v-show="getStateByBill(item.finishFlag,1)==''">已装货</text>
					<text v-show="getStateByBill(item.finishFlag,1)=='no'">未开始</text>
				</view>
			</view>
			<view :class="'status-item '+getStateNormal(20,info.billState)">
				<view class="status-img">
					<image src="@/static/image/icon_loading_complete.png" mode="widthFix"></image>
				</view>
				<view class="status-label">
					<text>运输中</text>
				</view>
				<view class="stauts-bottom">
					<text v-show="getStateNormal(20,info.billState)==''" class="status-time">{{finishTime&&finishTime.replace("T",' ')}}</text>
					<text  v-show="getStateNormal(20,info.billState)=='cur'" class="status-time">{{''}}</text>
					<text v-show="getStateNormal(20,info.billState)=='no'" class="status-time">{{''}}</text>
					<text v-show="getStateNormal(20,info.billState)=='cur'" class="status-status"
						@click="ingShow=true">去完成</text>
					<text v-show="getStateNormal(20,info.billState)==''">已完成</text>
					<text v-show="getStateNormal(20,info.billState)=='no'">未开始</text>
				</view>
			</view>
			<view :class="'status-item '+getStateByBill(item.finishFlag,2)" v-for="(item,index) in unLoads" :key="index">
				<view class="status-img">
					<image src="@/static/image/icon_discharge_position.png" mode="widthFix"></image>
				</view>
				<view class="status-label">
					<text>卸货点{{unLoads.length>1?(index+1):''}}</text>
				</view>
				<view class="stauts-bottom">
					<text class="status-time">{{item.finishTime&&item.finishTime.replace("T",' ')}}</text>
					<text v-show="getStateByBill(item.finishFlag,2)=='cur'" class="status-status"
						@click="downShow=true;downData.id=item.id;">去卸货</text>
					<text v-show="getStateByBill(item.finishFlag,2)==''">已卸货</text>
					<text v-show="getStateByBill(item.finishFlag,2)=='no'">未开始</text>
				</view>
			</view>
			<view :class="'status-item '+getStateNormal(40,info.billState)">
				<view class="status-img">
					<image src="@/static/image/icon_backcourt.png" mode="widthFix"></image>
				</view>
				<view class="status-label">
					<text>车辆回场，运单完成</text>
				</view>
				<view class="stauts-bottom">
					<text class="status-time">{{info.endTransTime&&info.endTransTime.replace("T",' ')}}</text>
					<text v-show="getStateNormal(40,info.billState)=='cur'" class="status-status"
						@click="returnShow=true">去回场</text>
					<text v-show="getStateNormal(40,info.billState)==''">已回场</text>
					<text v-show="getStateNormal(40,info.billState)=='no'">未开始</text>
				</view>
			</view>
		</view>
		<!-- 装货 -->
		<status-up :data="upData" :visible.sync="upShow" v-if="upShow" @confirm="upOk"></status-up>
		<!-- 卸货 -->
		<status-down :data="downData" :visible.sync="downShow" v-if="downShow" @confirm="downOk"></status-down>
		<!-- 运输中 -->
		<modal-confirm :data="ingData" :visible.sync="ingShow" @confirm="ingOk" @cancel="ingShow=false"></modal-confirm>
		<!-- 车辆回场 -->
		<modal-confirm :data="returnData" :visible.sync="returnShow" @confirm="returnOk"
			@cancel="returnShow=false"></modal-confirm>

		<!-- 是否发车 -->
		<modal-confirm :data="carData" :visible.sync="carShow" @confirm="carOk" @cancel="carShow=false"></modal-confirm>
	</view>
</template>

<script>
	import statusDown from '@/components/tool-modal/modal-status-down';
	import statusUp from '@/components/tool-modal/modal-status-up';
	import modalConfirm from '@/components/tool-modal/modal-confirm';
	import {
		dateFormat
	} from "@/common/util.js";
	export default {
		components: {
			statusDown,
			statusUp,
			modalConfirm
		},
		data() {
			return {
				info: {}, // 运单信息
				finishTime: "", // 运输中时间
				upShow: false, // 装货弹框
				upData: {},
				downShow: false, // 卸货弹框
				downData: {},
				ingShow: false, // 运输中提示框
				// fc:{finishTime:''},
				ingData: {
					title: '确认提示',
					content: '确定将状态变更为运输中吗？',
					showCancel: true,
				},
				carShow: false, // 运输中提示框
				carData: {
					title: '确认提示',
					content: '确定将状态变更为已发车吗？',
					showCancel: true,
				},
				returnShow: false, // 车辆回场提示框
				returnData: {
					title: '确认提示',
					content: '确定进行车辆回场操作吗？',
					showCancel: true,
				}

			};
		},
		computed: {
			loads() {
				const list = this.info.busiTaskaddrList || [];
				console.log(this.info,89)
				return list.filter(item => {
					if (item.addrType == 1) {
						this.finishTime = item.finishTime;
						return true;
					} else {
						return false;
					}
				})
			},
			unLoads() {
				const list = this.info.busiTaskaddrList || [];
				return list.filter(item => {
					return item.addrType != 1;
				})
			},
			finishFlag() {
				const finishFlag = {
					load: 0,
					unLoad: 0,
				}
				const list = this.info.busiTaskaddrList || [];
				list.forEach((item) => {
					if (item.finishFlag != 0) {
						if (item.addrType == 1) {
							finishFlag.load++;
						} else {
							finishFlag.unLoad++;
						}
					}
				})
				console.log(this.info,89)
				return finishFlag;
			}
		},
		methods: {
			// 装货信息
			upOk(currentWeight, id) {
				var billState = this.finishFlag.load + 1 == this.loads.length ? 20 : this.info.billState;
				this.changeWayBillState(currentWeight, id, billState, this.finishFlag.load > 0, '装货完成');
			},
			// 卸货信息
			downOk(currentWeight, id) {
				var billState = this.finishFlag.unLoad + 1 == this.unLoads.length ? 40 : this.info.billState;
				this.changeWayBillState(currentWeight, id, billState, this.finishFlag.unLoad > 0, '卸货完成');
			},
			// 运输中
			ingOk() {
				this.ingShow = false;
				this.changeWaybill({
					id: this.info.id,
					taskId: this.info.taskId,
					vehId: this.info.vehId,
					vehCode: this.info.vehCode,
					trailerId: this.info.trailerId,
					trailerVehCode: this.info.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '30',
					actualGoodsWeight: this.info.actualGoodsWeight,
				}, '已修改为运输中');
			},

			// 是否发车
			carOk() {
				this.carShow = false;
				this.changeWaybill({
					id: this.info.id,
					taskId: this.info.taskId,
					vehId: this.info.vehId,
					vehCode: this.info.vehCode,
					trailerId: this.info.trailerId,
					trailerVehCode: this.info.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '11',
					actualGoodsWeight: this.info.actualGoodsWeight,
				}, '已修改为已发车');
			},

			// 车辆回场，运单完成
			returnOk() {
				this.returnShow = false;
				this.changeWaybill({
					id: this.info.id,
					taskId: this.info.taskId,
					vehId: this.info.vehId,
					vehCode: this.info.vehCode,
					trailerId: this.info.trailerId,
					trailerVehCode: this.info.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '60',
					actualGoodsWeight: this.info.actualGoodsWeight,
					endTransTimes: dateFormat(new Date(), "YYYY-mm-dd")
				}, '已修改为车辆回场，运单完成');
			},
			// 修改运单信息
			changeWaybill(formData = {}, msg = "操作成功") {
				this.$api.busibillUpdate(formData).then((res) => {
					// console.log(res);
					uni.showToast({
						title: msg,
						success: () => {
							this.busibillDatail(this.info.id);
						}
					});
					// if(this.fc.finishTime == ''){
					// this.fc.finishTime=dateFormat(new Date(), "YYYY-mm-dd")
					// 					}
				})
			},
			// 修改运单装卸货信息
			changeWayBillState(currentWeight, id, billState, firstLoading, msg) {
				const formData = {
					addrId: id,
					currentWeight,
					billState,
					firstLoading,
					finishFlag: '1',
					taskId: this.info.taskId,
					bullId: this.info.id,
					vehId: this.info.vehId,
					vehCode: this.info.vehCode,
					trailerId: this.info.trailerId,
					trailerVehCode: this.info.trailerVehCode,
					lon: '',
					lat: '',
				}
				console.log(3123,formData)
				uni.getLocation({
					success: (location) => {
						// console.log(formData)
						// return;
						Object.assign(formData, {
							lon: location.longitude,
							lat: location.latitude,
						})
						this.$api.updateBillTypeAndAddr(formData).then((res) => {
							console.log(11,res)
							uni.showToast({
								title: msg,
								success: () => {
									this.busibillDatail(this.info.id);
								}
							});
						})
					},
					fail: () => {
						this.$api.updateBillTypeAndAddr(formData).then((res) => {
							// console.log(res)
							uni.showToast({
								title: msg,
								success: () => {
									this.busibillDatail(this.info.id);
								}
							});
						})
					}
				})
			},
			busibillDatail(id) {
				this.$api.busibillDatail({
					id
				}).then(res => {
					console.log(12, res.data.data)
					this.info = res.data.data;
					// this.info.billState = '11'
				})
			},
			getStateByBill(finishFlag, type) {
				var billState = this.info.billState;
				//type = 1 装货 type = 2 卸货
				if (billState == '0') {
					//作废
					return '';
				}
				if (type == 1) {
					if (20 <= billState) {
						//装货完成
						return '';
					} else {
						// finishFlag == '0' && '11' == billState
						if (finishFlag == '0' && '11' == billState) {
							return 'cur';
						} else if(finishFlag == '1') {
							return '';
						}else{
							return 'no';
						}
						// if (finishFlag == '0') {
						// 	return 'cur';
						// } else {
						// 	return '';
						// }
					}
				} else {
					if (30 < billState) {
						return '';
					} else if ('30' == billState && finishFlag == '0') {
						return 'cur';
					} else if ('30' == billState && finishFlag == '1') {
						return '';
					} else {
						return 'no';
					}
				}
			},
			getStateNormal(lastValue, billState) {
				if (billState == '0') {
					//作废
					return '';
				}
				if (lastValue == billState) {
					return 'cur';
				} else {
					if (lastValue < billState) {
						return '';
					} else {
						return 'no';
					}
				}
			},
		},
		onLoad(option) {
			
			console.log(option,555)
			const param = option.param ? JSON.parse(option.param) : {};
			if (!param.id) {
				this.$goBack('/pages/dgs_qy/waybill/list');
				return false;
			}
			this.busibillDatail(param.id)
		}
	}
</script>

<style lang="scss">
	.status-change {
		padding: 40rpx;

		.status-list {
			position: relative;
			line-height: 44rpx;
			color: #666666;
			font-size: 34rpx;

			&::after {
				content: "";
				position: absolute;
				left: -1px;
				top: 50%;
				transform: translateY(-50%);
				width: 2px;
				background-color: #CCCCCC;
				height: calc(100% - 88rpx);
			}

			.status-item {
				margin-bottom: 80rpx;
				padding-left: 30rpx;
				position: relative;
				z-index: 2;

				.status-img {
					content: "";
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: #fff;
					border: 2px solid #CCCCCC;
					border-radius: 50%;
					left: 0;
					top: 50%;
					transform: translate(-50%, -50%);
					z-index: 99;

					image {
						display: none;
						width: 20px;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.stauts-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				&:last-child {
					margin-bottom: 0;
				}

				&.cur {
					.status-status {
						color: $app-color;
					}

					.status-img {
						image {
							display: block;
						}
					}
				}

				&.no {
					&::after {
						content: "";
						position: absolute;
						height: 154rpx;
						width: 2px;
						background-color: $app-color;
						left: -1px;
						bottom: 44rpx;
						z-index: 1;
					}

					.status-img {
						border-color: $app-color;
					}
				}
			}
		}
	}
</style>